<template>
  <view class="page">
    <view class="header">
      <image class="img" src="./img/icon-class.png" mode="aspectFill"></image>
      <view class="title">
        <text class="text1">
          {{ data.class_name }}
        </text>
        <text class="text2">
          {{data.begin_date}}～ {{data.end_date}}
        </text>
      </view>
    </view>
    <view class="charts-card">
      <viwe class="text">
        作业完成进度统计图
      </viwe>
      <view class="charts-box">
        <qiun-data-charts type="ring" :opts="opts1" :chartData="chartData1" />
      </view>
    </view>
    <view class="charts-card">
      <text class="text">
        作业评分分布图
      </text>
      <view class="charts-box">
        <qiun-data-charts type="column" :opts="opts2" :chartData="chartData2" />
      </view>
      <viwe class="charts"></viwe>
    </view>
    <view class="table-card">
      <uni-table class="table" emptyText="暂无更多数据">
        <!-- 表头行 -->
        <uni-tr>
          <uni-th align="center" width="100rpx">序号</uni-th>
          <uni-th align="center" width="112rpx">姓名</uni-th>
          <uni-th align="left" width="156rpx">学号</uni-th>
          <uni-th align="left" width="160rpx">完成情况</uni-th>
          <uni-th align="left" width="176rpx">操作</uni-th>
        </uni-tr>
        <!-- 表格数据行 -->
        <uni-tr v-for="(value,index) in tableData" :key="index">
          <uni-td>{{index+1}}</uni-td>
          <uni-td>{{value.student_name}}</uni-td>
          <uni-td>{{value.student_no}}</uni-td>
          <uni-td>
              <text class="status-text" v-if="value.status == 0">已完成</text>
              <text class="status-text" v-if="value.status == 1">未完成</text>
              <text class="status-text" v-if="value.status == 2">未提交</text>
          </uni-td>
          <uni-td>
            <view
              class="status-btn"
              v-if="value.status == 0"
              @click="handleDetail(value)"
            >
              查看报告
            </view>
            <view
              class="status-btn"
              v-if="value.status == 1"
              @click="handleScore(value)"
            >
              评分
            </view>

          </uni-td>
        </uni-tr>
      </uni-table>
      <view style="height: 200rpx;"></view>
    </view>
    <bottomBackBtn v-if="showButtom"></bottomBackBtn>
  </view>
</template>
<script>
import API from "@/api/teacherapi";
export default {
  data() {
    return {
      showButtom:true,
      homework_id: '',
      data:{},
      tableData:[],
      chartData1: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts1: {
        rotate: false,
        rotateLock: false,
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: [5, 5, 5, 5],
        dataLabel: true,
        enableScroll: false,
        legend: {
          show: false,
          position: "right",
          lineHeight: 25
        },
        title: {
          name: "",
          fontSize: 15,
          color: "#666666"
        },
        subtitle: {
          show: false,
          name: "",
          fontSize: 25,
          color: "#7cb5ec"
        },
        extra: {
          ring: {
            ringWidth: 30,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        }
      },
      chartData2: {},
      opts2: {
        color: ["#2776FF"],
        padding: [15, 15, 0, 5],
        enableScroll: false,
        legend: {
          show: false,
        },
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          data: [
            {
              min: 0
            }
          ]
        },
        extra: {
          column: {
            type: "group",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            linearType: "custom",
            seriesGap: 5,
            linearOpacity: 0.5,
            barBorderCircle: true,
            // customColor: [
            //   "#FA7D8D",
            //   "#EB88E2"
            // ]
          }
        }
      }
    };
  },
  onReady() {
    // this.getServerData1();
    // this.getServerData2();
  },
  async onLoad(option) {
    this.homework_id = option.homework_id
    this.getHomeworkFetchModel();
  },
  methods: {
    handleScore(value) {
      uni.navigateTo({
        url: '/pages/teacher/job/score?name=' + value.name + '&report_id=' + value.id,
      })
    },
    handleDetail(value) {
      uni.navigateTo({
        url: '/pages/teacher/job/score?name=' + value.name + '&report_id=' + value.id + '&detail=1',
      })
    },
    async getHomeworkFetchModel() {
      let data = {
        homework_id: this.homework_id,
      }
      let res = await API.HomeworkFetchModel(data);
      this.data = res;
      let list = res.reports.map((item) => {
        return {
          id: item.report_id,
          name: res?.name,
          student_name: item?.student_name_from_user,
          student_no: item?.student_no,
          status: item.report_score !== null ? 0 : 1,
          date: item?.updated,
          score: item?.report_score?.finnal_score ?? "未评分",
        };
      });
      let unlist = res.unfinish_students.map((item) => {
        return {
          student_name: item.student.user.real_name,
          student_no: null,
          status: 2,
          date: "",
          score: "未评分",
        };
      });
      this.chartData1 = {
        series: [
          {
            data: [
              { value: res?.repors_has_score_count ?? 0, name: "已评分" },
              { value: res?.repors_has_not_score_count ?? 0, name: "待评分" },
              { value: res?.unfinish_students_count ?? 0, name: "未完成" },
            ]
          }
        ]
      };
      let scoreList = res?.repors_has_score.map((item) => {
        return {
          score: item?.report_score?.finnal_score,
        };
      });
      //把scoreList中的score字段放到dataY中,分数按照100-90,80-70,70-60,60-50,50以下分段统计数量
      let arr = [0, 0, 0, 0, 0, 0]
      scoreList.forEach((item) => {
        if (item.score >= 90) {
          arr[0] += 1;
        } else if (item.score >= 80) {
          arr[1] += 1;
        } else if (item.score >= 70) {
          arr[2] += 1;
        } else if (item.score >= 60) {
          arr[3] += 1;
        } else if (item.score >= 50) {
          arr[4] += 1;
        } else {
          arr[5] += 1;
        }
      });
      this.chartData2 = {
        categories: ["A", "B", "C", "D", "E", "F"],
        series: [
          {
            name: "",
            data: arr
          },
        ]
      };
      this.tableData = [...list, ...unlist];
      console.log(this.tableData);
    }
  },
};
</script>
<style scoped lang="less">
.page {
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  width: 100%;
  height: 100%;
  .header {
    width: 100%;
    background: #FFFFFF;
    box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E6EBF1;
    padding: 24rpx;
    box-sizing: border-box;
    display: flex;
    margin-bottom: 16rpx;

    .img {
      width: 92rpx;
      height: 92rpx;
      margin-right: 24rpx;
    }

    .title {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      .text1 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
        color: #614444;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }

      .text2 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        line-height: 34rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }

  .charts-card {
    width: 100%;
    background: #FFFFFF;
    margin-bottom: 16rpx;
    padding: 24rpx;

    .text {
      height: 40rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #262626;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
    }
  }
  .table-card{
    .table{
      margin-bottom: 100rpx;
    }
  }
  .status-btn{
    height: 40rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #2776FF;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    margin-right: 20rpx;
  }
}
</style>
